﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职称设置</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <style>
        /* 可以添加一些自定义样式 */
        .page-container {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        body {
            background-color: #FFFFCC;
        }
    </style>
</head>
<body>
    <div id="app">

        <div>您正在做的业务是：人力资源--招聘管理--职位发布管理--职位发布变更</div>
        <div><button v-on:click="goToAdd">添加</button></div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="rolesID" label="角色编号" width="180"></el-table-column>
            <el-table-column prop="rolesName" label="角色名称" width="180"></el-table-column>
            <el-table-column prop="RolesInstruction" label="角色说明"></el-table-column>
            <el-table-column prop="rolesIf" label="是否可用">
                <template #default="scope">
                    {{ scope.row.rolesIf==="True" ? '是' : '否' }}
                </template>
            </el-table-column>  
            <el-table-column prop="rolesID" label="操作">
                <template #default="scope">
                    <el-button size="small" type="primary" v-on:click="() => goToUpdatePage(scope.row.rolesID)">修改</el-button>
                    <el-button size="small" type="primary" v-on:click="() => confirmDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加分页组件 -->
        <div class="page-container">
            <el-pagination v-on:size-change="handleSizeChange"
                           v-on:current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[4, 8, 12, 20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>
    </div>
    <script>
          const { createApp, ref, onMounted } = Vue;

          const app = createApp({
            setup() {

                const tableData = ref([]); // 修正变量名拼写错误
                const pageSize = ref(4);
                const currentPage = ref(1); // 初始页码应为1
                const total = ref(0); // 总记录数

                function fill() {
                    // 将分页参数添加到URL查询字符串中
                    axios.get("/Role_Permissions/Select", {
                        params: {
                            CurrentPage: currentPage.value,
                            PageSize: pageSize.value
                        }
                    })
                    .then(res => {
                          tableData.value = res.data.list.itemas;
                          total.value = res.data.list.total; // 更新总记录数
                          console.log(tableData.value)
                    })
                    .catch(err => {
                        console.error("获取数据失败:", err);
                        // 可以添加错误提示
                        ElMessage.error("获取数据失败，请稍后重试");
                    });
                }

                // 页面大小变化时的处理函数
                function handleSizeChange(newSize) {
                    pageSize.value = newSize;
                    currentPage.value = 1; // 重置页码为1
                    fill();
                }

                // 当前页码变化时的处理函数
                function handleCurrentChange(newPage) {
                    currentPage.value = newPage;
                    fill();
                }

                // 修改页面跳转函数
                function goToUpdatePage(id) {
                    window.location.href = `/Role_Permissions/Upd?id=${id}`;
                }

                function goToAdd(){
                    window.location.href = `/Role_Permissions/Add`
                }

                  // 确认删除对话框
        const confirmDelete = (row) => {
            ElementPlus.ElMessageBox.confirm(
                `确定要删除吗？`,
                '删除确认',
                {
                    confirmButtonText: '确认删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(() => {
                // 传递row参数给Del函数
                Del(row);
            })
            .catch(() => {
                ElementPlus.ElMessage.info('已取消删除');
            });
        };

        // 删除函数
        function Del(row) {
            console.log("删除记录，ID:", row.rolesID);
            axios.get(`/Role_Permissions/Delete`,{
                params: {
                    id: row.rolesID
                }
            })
            .then(res=>{
                fill();
                if(res.data.zhi=="ok"){
                     ElementPlus.ElMessage.success('删除成功');
                }
            })
            .catch(err => {
                console.error("删除失败:", err);
                ElementPlus.ElMessage.error("删除失败，请稍后重试");
            });
        }

                // 初始加载数据
                onMounted(() => {
                    fill();
                });

                return {
                    tableData,
                    pageSize,
                    currentPage,
                    total,
                    goToUpdatePage,
                    Del,
                    handleSizeChange,
                    handleCurrentChange,
                    confirmDelete,
                    goToAdd
                }
            }
          });

          app.use(ElementPlus);
          app.mount('#app');
    </script>
</body>
</html>

